<template>
    <div class="register-page">
      <h2 style="padding-bottom:18px;">注册</h2>
      <form>
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="registerForm.username" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="registerForm.password" required>
        </div>
        <div class="form-group">
          <label for="confirmPassword">重复密码：</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" required>
        </div>
        <div v-if="registerForm.password !== confirmPassword" class="error">
          密码和确认密码不一致
        </div>
        <div class="form-group">
          <label for="email">邮箱：</label>
          <div class="email" style="display:flex;height:30px;">
            <input type="text" id="email" v-model="registerForm.email" required>
            <button class="getCaptcha" style="max-width:100px;margin-top:0px;margin-left:20px;" @click="getEmialCaptcha">get captcha</button>
          </div>
        </div>
        <div class="form-group">
          <label for="captcha">验证码</label>
          <input type="text" id="captcha" v-model="registerForm.captcha">
        </div>
        <el-button type="primary" class="register" @click="register">注册</el-button>
        <p class="login-link">
            已有账号? <router-link to="/userLogin">前往登录</router-link>.
        </p>
      </form>
    </div>
  </template>
  
  <script>
  import {getAuthRegisterCaptchaByEmail} from "../api/controller";
  import {postAuthRegister} from "../api/controller";
  export default {
    data() {
      return {
        registerForm:{
          username: '',
          password: '',
          email: '',
          captcha: '',
        },
        confirmPassword: '',
      };
    },
    methods: {
      register() {
        if (this.registerForm.password !== this.confirmPassword) {
          return;
        }
        postAuthRegister(this.registerForm)
          .then(response => {
            this.$message.success(response.message);
            this.$router.push("/userLogin");
          })
          .catch(error => {
            this.$message.error(error.message)
          });
      },
      getEmialCaptcha() {
        const params = {
          email: this.registerForm.email
        };
        getAuthRegisterCaptchaByEmail(params)
          .then(response => {
            this.$message.success(response.message);
          })
          .catch(error => {
            this.$message.error(error.message)
          });
      }

    }
  };
  </script>
  
  <style scoped>
  body{
    margin: 0;
    background-image: url('../assets/background.jpg');
    background-attachment:fixed;
    background-size:100% 100%;
  }

  .register-page{
    max-width: 400px;
    margin: 80px auto 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 200px;
    background: white;
  }

  h2{
    text-align: center;
  }

  .form-group{
    margin-bottom: 16px;
  }

  .login-link {
    margin-top: 24px;
    font-size: 10px; /* 调整字号为 14px，可以根据需要进行调整 */
    text-align: center; /* 实现居中对齐 */
  }

  .error {
    color: red;
  }

  .register{
    width: 412px;
  }
  </style>